<template>
  <IFexHeaderMain class="help-center-container">
    <template #header>
      <IHeader class="header-custom">帮助中心</IHeader>
    </template>
    <view class="main-container">
      <!-- 常见问题卡片 -->
      <view class="faq-card">
        <uni-collapse
          ref="collapse"
          accordion
          border="none"
          class="custom-collapse"
        >
          <uni-collapse-item
            :title="item.title"
            v-for="(item, index) in faqList"
            :key="index"
            class="faq-item"
          >
            <view class="help_content">
              <view class="help_text">{{ item.content }}</view>
              <!-- 新增辅助提示，增强引导 -->
              <view class="help_footer">
                <text class="footer_text">问题未解决？</text>
                <text class="footer_link" @click="openFeedback">联系客服</text>
              </view>
            </view>
          </uni-collapse-item>
        </uni-collapse>
      </view>

      <!-- 客服模块 -->
      <view class="service-section">
        <view class="service-title">需要更多帮助？</view>
        <view class="service-actions">
          <view class="service-item" @click="makePhoneCall">
            <uni-icons type="phone" size="32" color="#fff"></uni-icons>
            <text class="service-text">电话咨询</text>
          </view>
          <view class="service-item" @click="openFeedback">
            <uni-icons type="chat" size="32" color="#fff"></uni-icons>
            <text class="service-text">在线反馈</text>
          </view>
          <view class="service-item" @click="showChargeRules">
            <uni-icons type="phone" size="32" color="#fff"></uni-icons>
            <text class="service-text">收费说明</text>
          </view>
        </view>
        <!-- 新增热线信息 -->
        <view class="hotline-info">
          <text class="hotline-text">客服热线：</text>
          <text class="hotline-number" @click="makePhoneCall"
            >400-089-9801</text
          >
          <text class="hotline-time">（工作日 9:00-18:00）</text>
        </view>
      </view>
    </view>

    <template #footer>
      <ITabBar :index="2" />
    </template>
  </IFexHeaderMain>
</template>

<script setup lang="ts">
import { ref } from "vue";
import ITabBar from "@/components/container/ITabBar.vue";
import IFexHeaderMain from "@/components/container/IFexHeaderMain.vue";
import IHeader from "@/components/container/IHeader.vue";
import useToastMsg from "@/hooks/sysMsg";
  const toastMsg = useToastMsg()
// 数据定义
const faqList = ref([
  {
    title: "柜门打开后发现有物品",
    content:
      "若遇到此情况，请立即联系客服处理，我们会为您登记并妥善保管遗留物品。",
  },
  {
    title: "柜门卡住打不开",
    content:
      "请先检查是否有异物阻挡，若仍无法打开，可尝试轻拍柜门或联系客服远程协助，必要时我们会安排现场维修。",
  },
  {
    title: "门锁毁坏如何处理",
    content:
      "门锁毁坏属于设备故障，请第一时间联系客服，我们会尽快为您更换柜子或安排维修。",
  },
  {
    title: "订单结束忘记取物品",
    content:
      "您可在订单结束后 24 小时内联系客服说明情况，我们会为您保留物品，超过时间将按无主物品处理。",
  },
  {
    title: "预付费扣费规则",
    content:
      "预付费会在订单开始时冻结相应金额，订单结束后根据实际使用时长结算，多退少补。",
  },
  {
    title: "余额如何退款",
    content:
      "您可在“我的钱包”中提交退款申请，审核通过后余额将原路退回，预计 3-5 个工作日到账。",
  },
  {
    title: "柜门无法打开",
    content:
      "请先检查取件码是否正确，网络是否正常。若仍有问题，可联系客服提供订单信息协助解决。",
  },
  {
    title: "柜门打开后无法关闭",
    content:
      "检查柜门是否有异物卡住，轻推柜门确保关闭到位。若设备故障，联系客服安排维修。",
  },
  {
    title: "如何收费",
    content:
      "收费根据使用时长和柜子类型计费，具体规则可查看“收费说明”或联系客服了解。",
  },
]);

// 客服功能
const makePhoneCall = () => {
  uni.makePhoneCall({
    phoneNumber: "400-089-9801",
  });
};

const openFeedback = () => {
  uni.showToast({ title: "在线反馈功能开发中...", icon: "none" });
};

// 新增收费说明弹窗
const showChargeRules = () => {

  toastMsg.showModalMsg({
      title: "收费说明",
      content: "1. 小柜：0.5元/10分钟，封顶20元/天\n2. 中柜：1元/10分钟，封顶30元/天\n3. 大柜：1.5元/10分钟，封顶50元/天",
      options: {
        showCancel: false,
      },
    })
};
</script>

<style scoped lang="scss">
.help-center-container {
  background-color: #f5f7fa;
}

/* 头部样式增强 */
.header-custom {
  font-size: 34rpx !important;
  font-weight: 600;
  color: #333;
  padding: 25rpx 0 !important;
  border-bottom: 1px solid #eee;
}

/* FAQ卡片优化 */
.faq-card {
  background: #ffffff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.03);
  margin-bottom: 20rpx;
  overflow: hidden;
}

/* 自定义折叠面板样式 */
.custom-collapse {
  --uni-collapse-item-padding: 0 20rpx; /* 调整内边距 */
}

.faq-item {
  /* 自定义分割线，比默认更精致 */
  &::after {
    content: "";
    position: absolute;
    left: 20rpx;
    right: 20rpx;
    bottom: 0;
    height: 1rpx;
    background-color: #f5f5f5;
  }

  /* 最后一项去掉分割线 */
  &:last-child::after {
    display: none;
  }

  /* 标题样式优化 */
  .uni-collapse-item__title {
    height: 90rpx; /* 固定高度，保持对齐 */
    font-size: 28rpx;
    color: #333;
    align-items: center;

    /* 箭头图标调整 */
    &::after {
      width: 24rpx;
      height: 24rpx;
      transition: transform 0.3s;
    }
  }

  /* 展开时箭头旋转 */
  &.uni-collapse-item--active .uni-collapse-item__title::after {
    transform: rotate(180deg);
  }
}

/* 帮助内容样式 */
.help_content {
  padding: 20rpx 20rpx 25rpx;
  background-color: #fafafa;
}

.help_text {
  font-size: 26rpx;
  color: #666;
  line-height: 1.7;
  margin-bottom: 15rpx;
}

/* 内容底部辅助提示 */
.help_footer {
  display: flex;
  align-items: center;
  margin-top: 10rpx;
  font-size: 24rpx;
}

.footer_text {
  color: #999;
}

.footer_link {
  color: #409eff;
  margin-left: 5rpx;
  text-decoration: underline;
}

/* 客服模块优化 */
.service-section {
  background: #ffffff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.03);
  padding: 25rpx 20rpx;
}

.service-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 25rpx;
  padding-left: 5rpx;
}

/* 服务按钮优化 */
.service-actions {
  display: flex;
  justify-content: space-between;
  padding: 0 10rpx;
  margin-bottom: 25rpx;
}

.service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 140rpx;
  background: linear-gradient(135deg, #4096ff, #409eff);
  padding: 22rpx 0;
  border-radius: 16rpx;
  color: #fff;
  margin: 0 10rpx;
  box-shadow: 0 6rpx 16rpx rgba(64, 150, 255, 0.2);
  transition: all 0.3s;

  &:active {
    transform: scale(0.95);
    box-shadow: 0 4rpx 10rpx rgba(64, 150, 255, 0.15);
  }

  .service-text {
    font-size: 24rpx;
    margin-top: 12rpx;
  }
}

/* 热线信息样式 */
.hotline-info {
  text-align: center;
  padding-top: 10rpx;
  border-top: 1px dashed #f0f0f0;
}

.hotline-text {
  font-size: 24rpx;
  color: #999;
}

.hotline-number {
  font-size: 26rpx;
  color: #409eff;
  margin: 0 5rpx;
  text-decoration: underline;
}

.hotline-time {
  font-size: 22rpx;
  color: #ccc;
}
</style>
